<form (ngSubmit)="login(phone, form)" #form="ngForm">
  <!-- 没有#f #phone = ngModel报错 to get reason -->
  <!-- ()输出 【】输入 -->
  <div class="from-group">
    <input
      type="text"
      class="form-control"
      [(ngModel)]="model.phone"
      name="phone"
      pattern="1\d{10}"
      required
      placeholder="手机号"
      #phone="ngModel"
    />
    <!-- [] == :  -->
    <!-- #phone 模板引用变量 -->
    <div class="error" [hidden]="phone.valid || phone.untouched">
      <!-- ?. == e&&e.phoen&& -->
      <span *ngIf="phone?.errors?.required">请输入</span>
      <span *ngIf="phone?.errors?.pattern">格式异常</span>
    </div>
  </div>
  <div class="from-group">
    <input
      type="password"
      class="form-control"
      [(ngModel)]="model.pwd"
      name="pwd"
      placeholder="密码"
      required
      #pwd="ngModel"
    />
    <!-- {{ pwd.value }}
    {{ pwd }} -->
    <div class="error" [hidden]="pwd.valid || pwd.untouched">
      <!-- ?. == e&&e.phoen&& -->
      <span *ngIf="pwd?.errors?.required">请输入</span>
    </div>
  </div>
  <div class="from-group">
    <label> <input type="checkbox" /><span>7天自动登录</span> </label>
    <a href="">忘记密码</a>
  </div>
  <button
    type="submit"
    [disabled]="form.invalid"
    class="btn btn-primary from-group"
  >
    登录
  </button>
</form>
<!-- 模板驱动的表单校验
    #ref ?= ref 
    #pwd 不赋值 表示当前dom元素
    赋值ngModel 通过获取当前校验状态
    ngForm 通过获取整个表单校验
    基于h5的表单校验 required min max minLength maxLength pattern 
    对应errors 中的字段
    asyncValidator: null
    dirty: false
    disabled: (...)
    enabled: (...)
    errors: (...)
    formDirective: (...)
    invalid: (...)
    path: (...)
    pending: (...)
    pristine: (...)
    status: (...)
    statusChanges: (...)
    touched: (...)
    untouched: (...)
    valid: (...)
    validator: (...)
    value: (...)
    valueChanges

    模板驱动表单
    FormsModule
    数据模型 LoginUser
    双向数据绑定 [(ngModel)]
    校验
    校验状态 #phone = 'ngModel'

    httpClientModule after browserModule 
    使用service时 不管实例化与销毁

    post(url,body,config) get(url,config) put(url,body,config) del(url,config)
    Observable类 

    express-session cookie-parser
    有效期到了 浏览器自动删了
    session 数据库 express-mysql-session

    重构1:模块化
    user模块
    组件 服务 类 放在一起
-->
